<template>
	<view class="work-container">
		<uni-forms class="queryForm" ref="queryForm" :modelValue="queryParams">
			<uni-row>
				<uni-col :span="11" class="colStyle">
					<uni-forms-item>
						<uni-data-select class="queryFormSelect" v-model="queryParams.type" placeholder="请选择饲料类型"
							:localdata="material_type" @change="handleQuery"></uni-data-select>
					</uni-forms-item>
				</uni-col>
				<uni-col :span="11" class="colStyle">
					<uni-forms-item>
						<uni-data-select class="queryFormSelect" v-model="queryParams.position" placeholder="请选择存储地点"
							:localdata="store_position" @change="handleQuery"></uni-data-select>
					</uni-forms-item>
				</uni-col>
			</uni-row>
		</uni-forms>

		<uni-group class="group" mode="card" v-for="(item, index) in consumeList" :index="index" :key="index">
			<view class="code">
				<uni-icons class="iconLeft" type="home" size="30" color="#000000"></uni-icons>
				<uni-icons class="iconRight" type="right" size="15" color="#000000"
					@click="toConsumeDetials(item.materiaFeedConsumeId)"></uni-icons>
			</view>
			<hr />
			<view class="message">
				<view> 栏舍编码：{{item.phouseCode}}</view>

				<view v-if="item.phouseType == 1">
					栏舍类型：{{$dict.selectDictLabel('hmy_park_type', 1)}} </view>
				<view v-else-if="item.phouseType ==2">
					栏舍类型：{{$dict.selectDictLabel('hmy_park_type', 2)}} </view>
				<view v-else-if="item.phouseType ==3">
					栏舍类型：{{$dict.selectDictLabel('hmy_park_type', 3)}} </view>

				<view v-if="item.materiaFeedStorePosition == 1">
					仓库地址：{{$dict.selectDictLabel('materia_feed_store_position', 1)}} </view>
				<view v-else-if="item.materiaFeedStorePosition ==2">
					仓库地址：{{$dict.selectDictLabel('materia_feed_store_position', 2)}} </view>
				<view v-else-if="item.materiaFeedStorePosition ==3">
					仓库地址：{{$dict.selectDictLabel('materia_feed_store_position', 3)}} </view>
				<view v-else-if="item.materiaFeedStorePosition ==4">
					仓库地址：{{$dict.selectDictLabel('materia_feed_store_position', 4)}} </view>

				<view> 饲料类型：{{item.materiaFeedType}}</view>
				
				<view> 数量(KG)：{{item.materiaFeedConsumeNum}}</view>
				<view> 负责人：{{item.hmyStaff.staffName}}</view>
				<view> 消耗日期：{{ item.materiaFeedConsumeTime.slice(0, 16) }}</view>
			</view>
		</uni-group>
		<!-- 加载更多 -->
		<uni-load-more iconType="auto" :status="status" />
		<!-- 新增加号 -->
		<uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" @fabClick="toConsumeAdd" />
	</view>
</template>

<script>
	import {
		listConsume,
		getTypes
	} from "@/api/hmy/material";

	export default {
		name: "Consume",
		dicts: ['hmy_material_type', 'materia_feed_store_position', 'hmy_park_type'],
		data() {
			return {
				//饲料类型
				material_type: [],
				typesList: [],
				store_position: [{
						text: '一号仓库',
						value: 1
					},
					{
						text: '二号仓库',
						value: 2
					},
					{
						text: '三号仓库',
						value: 3
					}
				],
				// 进货表格数据
				consumeList: [],
				// 查询参数 
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					type: undefined,
					position: undefined,
				},
				//加载更多
				status: 'more',
				total: '',
				//增加的加号
				horizontal: 'right',
				vertical: 'bottom',
				pattern: {
					buttonColor: '#55aa7f',
				}
			};
		},
		created() {
			this.getTypesList();
			this.getList();
		},
		//上拉加载
		onReachBottom() {
			this.queryParams.pageSize += 5;
			this.getList();
			if (this.consumeList.length >= this.total) {
				this.status = 'noMore';
				//console.log(this.status);
			} else {
				this.status = 'loading';
			}
		},
		methods: {
			//动态获取饲料数据
			getTypesList(){
			  getTypes().then(res => {
				this.typesList = res.data;
				this.typesList.forEach((item,index) => {
					this.material_type.push({
						'text': item.materiaFeedType,
						'value': item.materiaFeedTypeId
					})
				})
			  })
			},
			/** 查询角色列表 */
			getList() {
				uni.showLoading({
					title: "加载中"
				})
				listConsume(this.queryParams).then(response => {
					this.consumeList = response.rows;
					this.total = response.total;
					this.consumeList.forEach(consumeItem => {
						this.typesList.forEach(typeItem => {
						  if (consumeItem.materiaFeedType == typeItem.materiaFeedTypeId){
							consumeItem.materiaFeedType = typeItem.materiaFeedType
						  }
						})
			
					  })
					uni.hideLoading();
				});
			},

			/** 条件搜索操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},

			// 新增
			toConsumeAdd() {
				this.$tab.navigateTo('/pages/hmy/material/consumeAdd');
			},

			//详情
			toConsumeDetials(e) {
				console.log("消耗详情ID", e);
				this.$tab.navigateTo('/pages/hmy/material/consumeDetials?id=' + e);
			}


		}
	};
</script>
<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: 100%;
		height: auto;
		background-color: #fcfcfc;
	}

	view {
		font-size: 16px;
		line-height: inherit;
	}

	/* #endif */

	.colStyle {
		margin: 0 6px;
	}

	.group {
		position: relative;
		top: -10px;
	}



	.code {
		margin-bottom: 5px;
	}

	.iconleft {
		float: left;
	}

	.iconRight {
		float: right;
		margin-right: 10px;
		margin-top: 5px;
	}

	.message {
		margin-top: 5px;
		color: #838383;
		line-height: 25px;
	}

	.queryForm {
		border: #fcfcfc solid 1px;
		width: 350px;
		margin-top: 8px;
		margin-left: 10px;
	}
</style>